<template>
  <div class="hello">
    <theme-picker></theme-picker>
    <el-button type="primary">主要按钮</el-button>
    <div>
      <el-radio-group v-model="className">
        <el-radio label="b0806c">b0806c</el-radio>
        <el-radio label="19bd7b">#19bd7b</el-radio>
        <el-radio label="bba011">#bba011</el-radio>
      </el-radio-group>
    </div>
  </div>
</template>

<script>
import ThemePicker from './ThemePicker'
import { toggleClass } from '../utils/index'
export default {
  name: 'HelloWorld',
  data () {
    return {
      className: 'custom-b0806c',
      msg: 'Welcome to Your Vue.js App'
    }
  },
  components: {
    ThemePicker
  },
  mounted () {
    toggleClass(document.body, 'custom-' + this.themecolor)
    let currentColor = this.$store.state.themecolor
    this.className = 'custom-' + currentColor
  },
  updated () {
    console.log(this.$store.state.themecolor)
    console.log(this.className)
  },
  computed: {
    themecolor: {
      get () {
        return this.$store.state.themecolor
      },
      set (val) {
        this.$store.commit('setThemeColor', val)
      }
    }
  },
  watch: {
    themecolor: {
      handler () {
        toggleClass(document.body, 'custom-' + this.themecolor)
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
